<template>
  <div class="detail-box">
    <s-header :title="'订单详情'" v-if="true"></s-header>
    <div class="detail-dsc">
      <div class="detail-msg">
        订单状态：<span v-if="!isShow">{{ countStatus() }}</span>
        <span v-else>待收货</span>
      </div>
      <div class="detail-msg">
        订单编号：<span>{{ list.data[0].order_data.order_id }}</span>
      </div>
      <div class="detail-msg">
        下单时间：<span>{{
          changeTime(list.data[0].order_data.create_time)
        }}</span>
      </div>
      <van-button
        type="primary"
        color="#1cacac"
        class="detail-dsc-btn"
        v-if="list.data[0].order_data.status == 0"
        v-show="isShowBtn"
        @click="payment"
        >去付款</van-button
      >
      <van-button
        v-else
        type="primary"
        color="#1cacac"
        class="detail-dsc-btn"
        @click="acceptGood"
        v-show="isShowBtn"
        >确认收货</van-button
      >
      <van-button
        type="default"
        class="detail-dsc-btn"
        @click="cancelOrder"
        v-show="isShowBtn"
        >取消订单</van-button
      >
    </div>
    <div class="detail-countmoney-exp">
      <div class="detail-countexp">
        商品金额：<span>{{ countMoney() }}</span>
      </div>
      <div class="detail-countexp">
        快递方式：<span>{{ list.data[0].order_data.delivery_method }}</span>
      </div>
    </div>
    <div class="detail-list">
      <div
        class="detail-list-item"
        v-for="(item, index) in list.data"
        :key="index"
      >
        <div class="img"><img :src="item.goods_data[0].image" alt="" /></div>
        <div class="dsc">{{ "最实惠的商品尽在OVO !" }}</div>
        <div class="freedomexp">全场包邮</div>
        <div class="count">
          <span>￥{{ item.goods_data[0].price }}</span>
          <span>×{{ item.goods_data[0].goods_count }}</span>
        </div>
      </div>
    </div>

    <!-- 支付 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
      <div class="pay-choose">
        <van-button class="Alipay" block @click="Alipay">支付宝支付</van-button>
        <van-button class="Wechartpay" block @click="Wechartpay"
          >微信支付</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import sHeader from "@/components/SimpleHeader";
import { defineComponent, reactive, onMounted, toRefs } from "vue";
interface list_data {
  goods_data: {
    good_name: string;
    goods_count: number;
    image: string;
    price: number;
  }[];
  order_data: {
    create_time: number;
    delivery_method: string;
    order_id: string;
    status: number;
  };
}
interface list {
  data: list_data[];
}

import { orderAll, finishedOrder, payOrder } from "../service/order";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
import { ref } from "vue";
export default defineComponent({
  name: "orderdetail",
  components: { sHeader },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const list: list = reactive({
      data: [
        {
          goods_data: [
            {
              good_name: "加载中...",
              goods_count: 0,
              image: "http://dummyimage.com/400x400",
              price: 0,
            },
          ],
          order_data: {
            create_time: Date.now(),
            delivery_method: "加载中...",
            order_id: "加载中...",
            status: 0,
          },
        },
      ],
    });
    const isShowBtn = ref(true);
    onMounted(() => {
      getData();
      countStatus();
      if (
        route.query.status === "4" ||
        route.query.status === "-1" ||
        route.query.status === "-2"
      ) {
        isShowBtn.value = false;
      }
    });
    const getData = async (changeStatus = "") => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const { data } = await orderAll();
      // console.log(data);
      // console.log(route.query.id);
      const newData = data.filter((item: list_data) => {
        return item.order_data.order_id == route.query.id;
      });
      list.data = newData;
      Toast.clear();
      if (changeStatus === "true") {
        isShow.value = !isShow.value;
      }
    };
    // 转换时间格式
    const changeTime = (timec: number) => {
      let time = new Date(timec);
      let year = time.getFullYear();
      let mounth = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let mins = time.getMinutes();
      let sec = time.getSeconds();
      return `${year}-${mounth}-${date} ${hours}:${mins}:${sec}`;
    };
    // 计算总钱数
    const countMoney = () => {
      // return (
      //   list.data[0].goods_data[0].goods_count *
      //   list.data[0].goods_data[0].price
      // );
      const count = list.data.map(
        (item) => item.goods_data[0].goods_count * item.goods_data[0].price
      );
      const countMoney = count.reduce((prev, current, index) => {
        return prev + current;
      }, 0);
      // console.log(count);
      // console.log(countMoney);
      return countMoney;
    };

    // 确认收货
    const acceptGood = async () => {
      let accept = {
        order_id: (route.query.id as string) || "",
        status: 4,
      };
      let apt: any = await finishedOrder(accept);
      if (apt.msg === "success") {
        Toast.success("收货成功");
        setTimeout(() => {
          router.go(-1);
        }, 1000);
      } else {
        Toast.fail("未知错误");
        return;
      }
    };

    //  判断订单状态
    const countStatus = () => {
      const statusObj = {
        "0": "待付款",
        "1": "待确认",
        "2": "待发货",
        "3": "已发货",
        "4": "交易完成",
        "-1": "订单取消",
        "-2": "订单取消",
      };
      let sta = route.query.status;
      //@ts-ignore
      if (statusObj[sta]) {
        // @ts-ignore
        return statusObj[sta];
      } else {
        return "找不到相关状态";
      }
    };

    // 取消订单
    const cancelOrder = async () => {
      const cancel = {
        order_id: (route.query.id as string) || "",
        status: -1,
      };
      const can: any = await finishedOrder(cancel);
      // console.log(can);

      if (can.msg === "success") {
        setTimeout(() => {
          Toast.success("取消订单成功,等待商家处理");
          router.go(-1);
        }, 1000);
      } else {
        Toast.fail("未知错误");
        return;
      }
    };
    // 去付款
    // @ts-ignore
    const show = ref(false);
    const isShow = ref(false);
    const payParams = {
      order_id: 0,
      pay_method: 0,
      total_money: 0,
    };
    const payment = async () => {
      // @ts-ignore
      show.value = true;
      const total = countMoney();
      payParams.total_money = Number(total);
      payParams.order_id = Number(list.data[0].order_data.order_id);
    };

    // 支付宝支付
    async function Alipay() {
      show.value = false;
      payParams.pay_method = 1;
      // @ts-ignore
      await payOrder(payParams);
      // 重新渲染一下页面
      getData("true");
    }
    // 微信支付
    async function Wechartpay() {
      show.value = false;
      payParams.pay_method = 2;
      // @ts-ignore
      await payOrder(payParams);
      // 重新渲染一下页面
      getData("true");
    }
    return {
      list,
      changeTime,
      countMoney,
      acceptGood,
      countStatus,
      cancelOrder,
      payment,
      show,
      isShow,
      Alipay,
      Wechartpay,
      isShowBtn,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../common/style/mixin.less";
.detail-box {
  background: #efefef;
  overflow: scroll;
  .detail-dsc {
    width: 100%;
    padding-bottom: 20px;
    margin-top: 44px;
    background: #fff;
    .detail-msg {
      margin: 0 auto;
      width: 80%;
      padding: 10px 0 0 0;
      text-align: left;
      .sc(14px,grey);
      span {
        color: black;
      }
    }
    .detail-dsc-btn {
      width: 80%;
      margin: 0 auto;
      margin-top: 10px;
      border: 1px solid #efefef;
    }
  }
  .detail-countmoney-exp {
    .wh(100%,auto);
    margin: 20px 0;
    background: #fff;
    padding-bottom: 10px;
    .detail-countexp {
      color: grey;
      width: 80%;
      margin: 0 auto;
      padding: 10px 0 0 0;
      text-align: left;
      font-size: 14px;
      span {
        color: black;
      }
    }
  }
  .detail-list {
    width: 100%;
    background: #fff;
    .detail-list-item {
      width: 95%;
      margin: 0 auto;
      height: 100px;
      border-bottom: 1px solid #efefef;
      .img {
        position: relative;
        top: 20px;
        left: 35px;
        .wh(60px,60px);
        img {
          .wh(100%,100%);
        }
      }
      .dsc {
        position: relative;
        font-size: 14px;
        .wh(60%,17px);
        top: -40px;
        left: 105px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .freedomexp {
        position: relative;
        font-size: 14px;
        .wh(50%,17px);
        top: -35px;
        left: 105px;
        text-align: left;
      }
      .count {
        position: relative;
        font-size: 14px;
        .wh(65%,17px);
        top: -30px;
        left: 105px;
        text-align: left;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.pay-choose {
  width: 100%;
  position: absolute;
  background: #fff;
  bottom: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  .Alipay {
    margin: 0 auto;
    width: 90%;
    color: rgb(255, 255, 255);
    background: rgb(25, 137, 250);
    border-color: rgb(25, 137, 250);
    margin-bottom: 10px;
  }
  .Wechartpay {
    margin: 0 auto;
    width: 90%;
    color: rgb(255, 255, 255);
    background: rgb(79, 192, 141);
    border-color: rgb(79, 192, 141);
  }
}
</style>